import { DirectiveBinding } from 'vue';

// 定义事件处理函数
function handleClick(this: HTMLButtonElement, event: Event) {
  if (!this.disabled) {
    // 点击后禁用按钮
    this.disabled = true;
    // 在指定时间后重新启用按钮
    setTimeout(() => {
      this.disabled = false;
    }, (event.target as any)?.__debounceTime || 1000); // 默认1秒
  }
}

// 禁用点击指令
const preventRapidClick = {
  mounted(el: HTMLButtonElement, binding: DirectiveBinding<number>) {
    // 将 debounceTime 存储在元素上，以便事件处理函数中使用
    (el as any).__debounceTime = binding.value || 1000;
    el.addEventListener('click', handleClick);
  },
  unmounted(el: HTMLButtonElement) {
    el.removeEventListener('click', handleClick);
  }
};

export default preventRapidClick;